<template>
    <div class="userTable">
        <div v-if="dataList">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark" style="font-size:14px;">
                        数据字典
                        <!-- <el-button type="primary" class="fr" @click="dataList=false">新增数据</el-button> -->
                    </div>
                </el-col>
            </el-row>
            <template>
                <el-table :data="tableData" style="width: 100%" stripe :header-cell-style="getRowClass">
                    <el-table-column prop="id" align="center" label="标识"></el-table-column>
                    <el-table-column prop="parentId" align="center" label="父类标识"></el-table-column>
                    <el-table-column prop="groupCode" align="center" label="分类编码"></el-table-column>
                    <el-table-column prop="name" align="center" label="名称" ></el-table-column>
                    <el-table-column prop="value" align="center" label="数值" ></el-table-column>
                    <el-table-column prop="descript" align="center" label="描述" ></el-table-column>
                    <el-table-column align="center" label="固定值" >
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.fixed" disabled></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="默认值" >
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.flag" @change="isSwitch(1,scope.row.flag)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="seqNum" align="center" label="排序" ></el-table-column>
                    <el-table-column align="center" label="状态" >
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isStatus" @change="isSwitch(2,scope.row.isStatus)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="日期" >
                        <template slot-scope="scope">
                            <span>{{scope.row.createTime | createTimeFile}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text">停用</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
            </template>
            <!--分页开始-->
            <div class="block">
                <span class="pageFreshFoot"><el-button type="text" class="xin" @click="xin()">刷新</el-button></span>
                <div class="pageComponentFoot">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="cpage"
                        :page-sizes="[10,20,30,40]"
                        :page-size="pagesize"
                        layout="total, prev, pager, next, jumper"
                        :total="totalCount">
                    </el-pagination>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div class="add-box" v-else>
            
        </div>
        <!--分页结束-->
    </div>
</template>
<script>
import HttpService from '../../api/service'
export default {
    data(){
        return{
            tableData: [],
            totalPage:10,           //  总页数
            cpage:1,                //  当前页
            pagesize:10,            //  每页显示数
            totalCount:0,         //  总条数
            dataList:true,          //  是否显示新增按钮
            checkList:['专注','同城']
        }
    },
    mounted(){
        this.dataLists()
    },
    methods:{
        // 设置header颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return 'background:#D5E7F3'
            } else {
                return ''
            }
        },
        // 设置内容行的颜色
        tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 === 1) {
                return 'even-row';
            }   
            return '';
        },
        // 数据字典列表
        dataLists(){
            let parmes = {
                sort:'createTime,DESC',
                page:this.cpage - 1,
                size:this.pagesize
            }
            HttpService.service.dataList(parmes,resp =>{
                for(let i = 0; i < resp.content.length; i++){
                    if(resp.content[i].status == 0) {
                        resp.content[i].isStatus = true
                    }else{
                        resp.content[i].isStatus = false
                    }
                }
                this.tableData = resp.content
                this.totalPage = resp.totalPages
                this.totalCount = resp.totalElements
            })
        },
        handleSizeChange(val) {
            this.cpage = val
            this.dataLists()
        },
        handleCurrentChange(val) {
            this.cpage = val
            this.dataLists()
        },
        // switch 方法   type 1 代表  默认值    2  代表状态
        isSwitch(type,item){
            this.$message('功能正在开发中... 请期待')
        }
    },
    filters:{
        createTimeFile(val){
            let d = new Date(val)
            return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` 
        }
    }
}
</script>

<style src="../../assets/css/gement.css"></style>
